<template>
  <div class="rollContainer">
    <div class="tableBtnBox">
      <Button icon="md-add" size="default" @click="add">添加时间</Button>
    </div>
    <div class="timeTable">
      <div class="table" v-for="(item,index) in list" :key="index">
        <div class="date">
          <Tag type="dot" @on-close="close($event,index)" closable>{{item.date}}</Tag>
          <Button icon="md-add" size="default" type="primary" @click="addNode(index)">添加时间节点</Button>
        </div>

        <Table border ref="selection" :columns="columns" :show-header="false" :data="item.node">
          <template slot-scope="{ row }" slot="time">{{row.time[0]}}-{{row.time[1]}}</template>
          <template slot-scope="{ row }" slot="action">
            <span class="tableBtn" @click="show(row,index)">
              <Icon size="18" type="ios-create-outline" />编辑
            </span>
            <span class="tableBtn" @click="remove(row,index)">
              <Icon size="18" type="ios-trash" />删除
            </span>
          </template>
        </Table>
      </div>
    </div>
    <Modal v-model="isAdd" :title="dateTime==''?'添加时间':'编辑时间'" width="700">
      <Form ref="addForm" :model="addForm" :rules="rules" :label-width="90">
        <FormItem label="选择日期" prop="date">
          <DatePicker
            type="date"
            v-model="addForm.date"
            placeholder="Select date"
            style="width: 200px"
            @on-change="changeDate"
          ></DatePicker>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="isAdd=false">取消</Button>
        <Button type="primary" @click="makeSure('addForm')">确定</Button>
      </div>
    </Modal>
    <Modal v-model="isAddNode" title="添加/编辑节点" width="700">
      <Form ref="nodeForm" :model="nodeForm" :rules="noderules" :label-width="90">
        <FormItem label="主题名称" prop="theme">
          <Input type="text" v-model.trim="nodeForm.theme" placeholder="请输入主题名称"></Input>
        </FormItem>
        <FormItem label="选择时间" prop="time">
          <TimePicker
            format="HH:mm"
            placeholder="Select time"
            type="timerange"
            v-model="nodeForm.time"
            style="width: 112px"
            @on-change="changeTime"
          ></TimePicker>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="isAddNode=false">取消</Button>
        <Button type="primary" @click="sure('nodeForm')">确定</Button>
      </div>
    </Modal>
    <div class="btn">
      <Button size="large" type="primary" @click="submit()">提交日程</Button>
    </div>
  </div>
</template>

<script>
import { miceInfo, modifyMice } from "../../api/exhibitors";
export default {
  data() {
    const timeCheck = (rule, value, callback) => {
      if (!value) {
        callback("请选择时间！");
      } else {
        callback();
      }
    };
    return {
      isAdd: false,
      isAddNode: false,
      addForm: {
        date: ""
      },
      nodeForm: {
        time: "",
        theme: ""
      },
      dateTime: "",
      node: "",
      index: "",
      list: [],
      columns: [
        {
          title: "时间",
          slot: "time",
          align: "center",
          minWidth: 100
        },
        {
          title: "主题",
          key: "theme",
          align: "center",
          minWidth: 200
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          minWidth: 200
        }
      ],
      noderules: {
        time: [{ required: true, validator: timeCheck, trigger: "change" }],
        theme: [{ required: true, message: "请输入主题！", trigger: "blur" }]
      },
      rules: {
        date: [{ required: true, message: "请选择日期！", trigger: "change" }]
      },
      miceId:"",
      miceObj: {
        about: "",
        address: "",
        articleId: "",
        end_time: "",
        image: "",
        miceId: "",
        miceName: "",
        parentId: "",
        schedule: "",
        sort: "",
        start_time: "",
        type: "",
        organize:""
      }
    };
  },
  created() {
    this.miceId = this.$route.query.miceId;
    this.getmiceInfo();
  },
  methods: {
    getmiceInfo() {
      miceInfo({ miceId: this.$route.query.miceId }).then(res => {
        if (res.status) {
          this.miceObj = res.data;
          this.list = JSON.parse(res.data.schedule);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    submit() {
      const { miceName, about, start_time, end_time ,organize} = this.miceObj;
      modifyMice({
        miceName,
        about,
        start_time,
        end_time,
        miceId: this.miceId,
        schedule:JSON.stringify(this.list),
        organize,
        type: 0
      }).then(res => {
        if (res.status) {
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    add() {
      this.addForm = {
        date: ""
      };
      this.isAdd = true;
    },
    addNode(index) {
      this.node = "";
      this.nodeForm = {
        time: "",
        theme: ""
      };
      this.index = index;
      this.isAddNode = true;
    },
    changeDate(e) {
      this.addForm.date = e;
    },
    changeTime(e) {
      this.addNode.time = e;
    },
    //删除节点
    remove(row, index) {
      this.$Modal.confirm({
        title: "警告",
        content: `删除后无法恢复，确定要删除？`,
        onOk: () => {
          this.list[index].node.splice(row._index, 1);
        },
        onCancel: () => {}
      });
    },
    //删除日期
    close(e, index) {
      this.$Modal.confirm({
        title: "警告",
        content: `删除后无法恢复，确定要删除？`,
        onOk: () => {
          this.list.splice(index, 1);
        },
        onCancel: () => {}
      });
    },
    show(row, index) {
      this.index = index;
      this.node = row._index + 1;
      this.nodeForm = {
        time: row.time,
        theme: row.theme
      };
      this.isAddNode = true;
    },
    makeSure(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let parentId
          if(Math.max(...this.list.map(x => x.parentId))>0){
             parentId = (Math.max(...this.list.map(x => x.parentId))) + 1
          }else{
            parentId = 1;
          }
          this.list.push({
            date: this.addForm.date,
            parentId,
            node: []
          });
          this.isAdd = false;
        }
      });
    },
    sure(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.node != "") {
            this.$set(this.list[this.index].node, this.node - 1, {
              time: this.nodeForm.time,
              theme: this.nodeForm.theme,
            });
          } else {
            this.list[this.index].node.push({
              time: this.nodeForm.time,
              theme: this.nodeForm.theme
            });
          }
          this.isAddNode = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.rollContainer {
  padding-bottom: 180px;
}
.btn {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background-color: #fff;
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>